<#assign basePath=req.contextPath>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="my self">
<meta name="author" content="tdu">
<title>IPE-项目脚手架登入</title>
<link rel="icon" href="${basePath}/resources/images/favicon.ico"
	type="image/x-icon" />
<link rel="shortcut icon"
	href="${basePath}/resources/images/favicon.ico" type="image/x-icon" />
<script src="${basePath}/resources/lib/crypto-md5.js"></script>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
	em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
	b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
	details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
	output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

body {
	font-size: 14px;
	font-family: 黑体, Helvetica, sans-serif;
	color: #404040; 
	background: #333366;
}

.container {
	margin: 190px auto;
}

.login {
	margin: 0 auto;
	width: 510px;
	background: white;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px
		rgba(0, 0, 0, 0.3);
}
.login form{
	padding:15px;
}

.login:before {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
	z-index: -1;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 4px;
}

.login h1 {
	line-height: 40px;
	font-weight: bold;
	font-size: 17px;
	color: #555;
	text-align: center;
	text-shadow: 0 1px white;
	background: #f3f3f3;
	border-bottom: 1px solid #cfcfcf;
	border-radius: 3px 3px 0 0;
	background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
	background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
	background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
	background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
	-webkit-box-shadow: 0 1px whitesmoke;
	box-shadow: 0 1px whitesmoke;
}

input[type=submit] {
	height: 30px;
	width:100px;
	font-weight: bold;
	color: #527881;
}

input[type=submit]:active {
	background: #cde5ef;
	border-color: #9eb9c2 #b3c0c8 #b4ccce;
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.form-group{
	text-align:right;
	margin: 15px;
}
.form-group input[name=useraccount],.form-group input[name=password]{
	height: 30px;
	width:100%;
	color: #404040;
}
.form-group input[name=captcha]{
	height: 30px;
	width: 	150px;
	color: #404040;
}
.left{
	float:left;
}
.right{
	float:right;
}
</style>
</head>
<body>
<section class="container">
    <div class="login">
      <h1>${sysname}-登录</h1>
      <form method="post" action="login" target="_top" onsubmit="submitForm()">
        <div class="form-group">
        	<input type="text" name="useraccount" value="" placeholder="用户名" required="required" autofocus="autofocus">
        </div>
        <div class="form-group">
         	<input type="password" name="password" onchange="encrypt(this)" value="" placeholder="密码" required="required">
        </div>
        <div class="form-group">
        	<input type="text" name="captcha" class="left"  value="" placeholder="验证码" required="required" >
        	<img src="verificationCode" class="left" onClick="changeCode(this)"  style="cursor: pointer" alt="看不清楚？请点击验证码区域进行刷新">
        	<input type="submit" class="right"  value="Login">
        </div>
      </form>
    </div>
</section>
</body>
<script type="text/javascript">
	function submitForm(){
		var pd=document.getElementsByName("password")[0];
		pd.value=CryptoJS.MD5(pd.value);
		return true;
	}
	function changeCode(obj){
		obj.src='verificationCode?a='+new Date();
	}
</script>
</html>